<template>
  <div>
    <nav-bar :field-data="fieldData"
             :curInd="curInd"
             @clickNavItem="clickNavItem"
    ></nav-bar>
    <course-item :course-data="actCourseData"></course-item>
  </div>
</template>

<script>

  /*获取数据*/
  import IndexModel from "../models/index";
  const indexModel = new IndexModel();
  /*配置*/
  import {DEFAULT_NAV_FIELD} from "../configs/config";
  /*方法*/
  import {filterData} from "../utils/tools.js";

  /*模块*/
  import NavBar from "../components/NavBar/index";
  import CourseItem from "../components/CourseList/index";

  export default {
      name: 'IndexPage',
      components:{NavBar,CourseItem},
      data(){
          return{
              curInd:0,
              fieldData:[
                  {field_id:"-1", field_name:"全部"},
                  {field_id:"0", field_name:"前端高新就业"},
                  {field_id:"1", field_name:"精品小课"},
                  {field_id:"2", field_name:"前端基础"},
                  {field_id:"3", field_name:"全修班体验课"}
              ],
              courseData:[
                  {field:"0", name:"vue", price:2000},
                  {field:"0", name:"html", price:3000},
                  {field:"3", name:"java", price:0},
                  {field:"3", name:"php", price:8000}
              ],
              actCourseData:[]
          }
      },
      methods:{
          clickNavItem(e){
              this.curInd = e;
              this.actCourseData = filterData(e,this.courseData);
          }
      },
      mounted() {
          /*没有数据接口，就不演示了。返回的是promise*/
          // indexModel.getData().then((data)=>{
          //     console.log(data);
          // })

          this.actCourseData = filterData(DEFAULT_NAV_FIELD,this.courseData);
      }
  }
</script>

<style scoped lang="scss">
</style>
